<template>
  <div class="app-container">
    <el-card class="card-form">
      <div class="expert-title-outBox">
        <div class="expert-title">绩效指标配置</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <el-form :model="queryParams" :rules="rules">
        <!-- 基本信息 -->
        <div>
          <div class="model-title">
            <img src="../../../assets/images/tripartite/icon_title.png" />
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="绩效名称" prop="roleName">
                <el-input
                  v-model="queryParams.roleName"
                  placeholder="请输入"
                  clearable
                  size="medium"
                  style="width: 400px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="绩效类型" prop="roleName">
                <el-select
                  v-model="queryParams.roleName"
                  placeholder="请选择"
                  clearable
                  size="medium"
                  style="width: 400px"
                >
                  <el-option
                    v-for="dict in sexOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 绩效指标 -->
        <div>
          <div class="model-title">
            <img src="@/assets/images/tripartite/icon_title.png" />
            <span>绩效指标</span>
          </div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="medium"
            @click="handleAdd"
            >添加</el-button
          >
          <el-table
            v-loading="loading"
            :data="technicalList"
            border
            class="table_technical"
          >
            <el-table-column
              label="序号"
              align="center"
              prop="roleId"
              width="65"
            />
            <el-table-column
              label="指标名称"
              align="center"
              prop="roleId"
              width="400"
            />
            <el-table-column
              label="指标描述"
              align="center"
              prop="roleName"
              :show-overflow-tooltip="true"
              width="600"
            />
            <el-table-column
              label="指标权重"
              align="center"
              prop="roleKey"
              :show-overflow-tooltip="true"
              width="400"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleAdd(scope.row)"
                  v-hasPermi="['tripartite:organization:edit']"
                  >编辑</el-button
                >

                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['tripartite:organization:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-form-item class="submit-outBox">
          <el-button size="small" class="btn">返回</el-button>
          <el-button size="small" class="btn btn_submit" type="primary"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 添加绩效指标对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="technicalDialog"
      width="628px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-form
        ref="technicalForm"
        :model="technicalForm"
        :rules="technicalRules"
        label-width="100px"
      >
        <el-form-item label="指标名称" prop="roleName">
          <el-input
            v-model="technicalForm.roleName"
            placeholder="请输入"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="指标描述" prop="roleName">
          <el-input v-model="technicalForm.value1" type="textarea" placeholder="请输入内容" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="指标权重" prop="roleName">
          <el-select
            v-model="technicalForm.roleName"
            placeholder="请选择"
            clearable
            size="medium"
            style="width: 400px"
          >
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 文件上传对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls, .png, .jpg"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!-- <div class="el-upload__tip" slot="tip"> -->
        <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据 -->
        <!-- <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link> -->
        <!-- </div> -->
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层（绩效指标）
      technicalDialog: false,
      // 表单参数 （技术职称）
      technicalForm: {},
      // 表单校验 （技术职称）
      technicalRules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      // 数据列表 （技术职称）
      technicalList: [{ roleName: "lili" }],
      // 表单参数
      queryParams: { roleName: "" },
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      // 性别类型数据字典
      sexOptions: [
        { dictValue: "男", dictLabel: "男" },
        { dictValue: "女", dictLabel: "女" },
      ],
      // 上传文件参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        // 上传文件名称
        fileName: "请选择文件",
      },
    };
  },
  methods: {
    /** 返回按钮操作 */
    handBack() {
      this.$router.push({
        path: "/system/performance",
      });
    },
    /** 新增按钮操作 绩效指标*/
    handleAdd() {
      this.technicalDialog = true;
      this.title = "添加绩效指标";
    },
    /** 取消按钮 绩效指标*/
    cancel() {
      this.technicalDialog = false;
    },
    /** 确定按钮 绩效指标*/
    submitForm() {
      this.technicalDialog = false;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const roleIds = row.roleId;
      this.$confirm("是否确认删除 ？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "del_box",
      })
        .then(function () {
          // return delRole(roleIds);
        })
        .then(() => {
          // this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 文件上传操作 */
    handleImport() {
      this.upload.title = "个人照片";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      // this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.upload.fileName = file.name;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
      console.log("why");
    },
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
    font-size: 18px;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  margin-left: 0;
  padding-top: 48px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebecef;
  .btn {
    width: 196px;
    height: 40px;
    margin-right: 10px;
  }
  .btn_submit {
    background: #0d72ff;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
.other-title {
  margin-top: 24px;
}
.table_technical,
.table_profession {
  margin-top: 24px;
}
// 文件上传
.files_upload_box {
  width: 400px;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  font-family: PingFang SC, PingFang SC-Regular;
  color: #afb3bd;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 15px;
  position: relative;
  .img_box {
    height: 36px;
    width: 36px;
    background: #0d72ff;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    position: absolute;
    right: -1px;
    top: -1px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
</style>
<style lang="scss">
/**表单label取消加粗 */
.card-form {
  .el-form-item {
    margin-bottom: 24px;
  }
  label {
    font-weight: normal !important;
  }
}
.submit-outBox {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
/* 删除弹出框样式 */
.del_box {
  width: 345px;
  height: 175px;
  .el-message-box__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    .el-message-box__status.el-icon-warning {
      color: #ea4747;
    }
    .el-message-box__status + .el-message-box__message {
      padding-right: 0;
    }
  }
}
</style>
